<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getCodeFn, loginFn } from '@/api/login';
import { showToast } from 'vant';

const flag = ref(true)
const tel = ref('')
const code = ref('')
const password = ref('')
const checked = ref(false)
const read = ref(false)
const router = useRouter()
const codeButtonText = ref('获取验证码')

function onClickRight() {
    router.push('/register')

}

function changeMethod(f) {
    flag.value = f
}

const alltime = ref(60)
const isgetCode = ref(false)
function getCode() {
    getCodeFn().then(res => {
        console.log(res.data.code);
        showToast(res.data.code)
        isgetCode.value = true
        const time = setInterval(() => {
            if (alltime <= 0) {
                alltime.value = 60
                codeButtonText.value = '重新获取'
                isgetCode.value = false
                clearInterval(time)
            }
            alltime.value--
            codeButtonText.value = alltime.value + 's后重新获取'
        }, 1000)
    })
}

function toforget() {
    router.push('/forget')
}

function login() {
    if (read.value) {
        loginFn({
            tel: tel.value,
            code: code.value,
            password: password.value,
            method: flag.value
        }).then(res => {
            showToast(res.message)
            if (res.data.flag) {
                router.push('/')
            }
        })
    } else {
        showToast('请先同意《用户协议》和《隐私协议》')
    }
}
</script>
<template>
    <main>
        <van-nav-bar @click-right="onClickRight">
            <template #right>
                <span class="right">注册账号</span>
            </template>
        </van-nav-bar>
        <div class="top">
            <div class="back"></div>
            <img src="https://cdn7.axureshop.com/demo/1972680/images/%E5%90%AF%E5%8A%A8%E9%A1%B5_%E5%BC%95%E5%AF%BC%E9%A1%B5/u956.svg"
                alt="">

        </div>
        <div class="title">车主版</div>
        <section>
            <div class="button">
                <span :class="flag ? 'spanactive' : 'spanleft'" @click="changeMethod(true)">验证码登录</span>
                <span :class="flag ? 'spanright' : 'spanactive'" @click="changeMethod(false)">密码登录</span>
            </div>
            <van-field v-model="tel" placeholder="手机号码" />
            <div v-if="flag" class="codelogin">
                <van-field v-model="code" placeholder="短信验证码">
                </van-field>
                <van-button class="code" @click="getCode" :disabled="isgetCode">{{ codeButtonText }}</van-button>
            </div>
            <div class="password" v-else>
                <van-field v-model="password" class="pass" :type="checked ? 'text' : 'password'" placeholder="密码">
                </van-field>
                <van-switch class="switch" v-model="checked" />
                <span class="forget" @click="toforget">忘记密码？</span>
            </div>
            <div class="submit" @click="login">
                登录
            </div>
            <div class="bottom">
                <van-checkbox v-model="read" />
                <span>登录即代表同意《用户协议》和《隐私协议》</span>
            </div>
        </section>
    </main>
</template>
<style lang="scss" scoped>
main {
    font-size: 12px;
    height: 100%;
    position: relative;
    background-color: #f2f2f2;
    z-index: 0;
    padding-top: 0;

    .van-nav-bar {
        background-color: #1678ff;

        .right {
            color: white;
        }
    }

    .top {
        width: 80px;
        height: 80px;
        background-color: white;
        border-radius: 50%;
        box-shadow: inset 0 0 15px #1678ff;
        margin: 10px auto;
        display: flex;
        align-items: center;
        justify-content: center;

        .back {
            width: 100%;
            height: 300px;
            background-color: #1678ff;
            position: absolute;
            z-index: -1;
            border-radius: 40px;
        }
    }

    .title {
        font-size: 20px;
        color: white;
        font-weight: bold;
        text-align: center;
    }

    section {
        width: 335px;
        height: 440px;
        background-color: white;
        margin: 20px auto;
        border-radius: 20px;
        overflow: hidden;

        .button {
            width: 100%;

            span {
                display: inline-block;
                width: 50%;
                text-align: center;
                line-height: 50px;
                font-size: 14px;
            }

            .spanactive {
                border-radius: 0 0 20px 20px;
                color: #3a8cff;
            }

            .spanleft {
                background-color: #e2eeff;
                border-radius: 0 0 20px 0;
            }

            .spanright {
                background-color: #e2eeff;
                border-radius: 0 0 0 20px;
            }
        }

        .van-cell {
            border: 1px #1678ff solid;
            margin: 0 30px;
            width: calc(100% - 60px);
            border-radius: 100px;
            margin-top: 40px;


        }

        .codelogin {
            position: relative;

            .code {
                color: #3a8cff;
                margin: 0;
                padding: 0;
                border: none;
                position: absolute;
                right: 40px;
                top: 9px;
                line-height: 30px;
                height: 30px;
            }
        }


        .password {
            position: relative;

            .pass {
                box-sizing: border-box;
                padding: 10px 60px 10px 16px;
            }

            .forget {
                position: absolute;
                right: 40px;
                color: gray;
            }

            .switch {
                position: absolute;
                top: 7px;
                right: 40px;
            }
        }

        .submit {
            margin: 30px;
            width: calc(100% - 60px);
            text-align: center;
            background-color: #1678ff;
            line-height: 50px;
            border-radius: 50px;
            color: white;
            font-size: 14px;
        }

        .bottom {
            margin-top: 80px;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                margin-left: 10px;
                color: #1678ff;
            }
        }
    }
}
</style>